<template>
  <div class="adoption-list">
    <h3>领养申请列表</h3>
    <el-table :data="applications" border>
      <el-table-column prop="id" label="申请编号"></el-table-column>
      <el-table-column prop="userName" label="申请人"></el-table-column>
      <el-table-column prop="plantName" label="申请植物"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="getStatusTagType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" type="success" @click="approve(row)">通过</el-button>
          <el-button size="small" type="danger" @click="reject(row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const applications = ref([])

onMounted(() => {
  applications.value = [
    { id: 'A20240601', userName: '张三', plantName: '仙人掌', status: '待审批' },
    { id: 'A20240602', userName: '李四', plantName: '绿萝', status: '已通过' }
  ]
})

function getStatusTagType(status) {
  switch (status) {
    case '已通过': return 'success'
    case '已拒绝': return 'danger'
    default: return 'warning'
  }
}

function getStatusText(status) {
  return status
}

function approve(app) {
  app.status = '已通过'
  console.log('批准申请:', app)
}

function reject(app) {
  app.status = '已拒绝'
  console.log('拒绝申请:', app)
}
</script>